<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6类</title>
</head>
<body>
  <script>
    /* 
    需求: 
        现在2个人, 都有姓名与年龄(值自己指定), 都能自我介绍自己的姓名和年龄
        现在又有了一个学生, 它有身价的属性, 能介绍它的所有信息
    */
    /* 
    React中会使用 类语法
    关键字: class / constructor / super / extends / static
    */


    class Person {

      // 静态属性 => 类的属性
      static staticProp = 'abc'
      // 实例属性
      instanceProp = 'cba'

      // 实例方法
      instanceMethod = function () {
        console.log('instanceMethod')
      }

      // 通过构造器指定实例属性
      constructor (name, age) {
        this.name = name
        this.age = age
        this.instanceMethod2 = function () {
          console.log('instanceMethod2()')
        }

        // 所有在类体指定的实例属性/方法, 都是constructor中执行的
        // this.instanceProp = 'cba'
        // this.instanceMethod = function () {
        //   console.log('instanceMethod')
        // }
        // this.sayInfo2 = () => {
        //   console.log('sayInfo2')
        // }
      }

      // 原型对象上的方法 => 原型方法
      sayInfo () {
        console.log(`我叫${this.name}, 今年${this.age}`)
      }
      // 给实例添加方法
      sayInfo2 = () => {
        console.log('sayInfo2')
      }
    }

    // const p1 = new Person('A', 12)
    // const p2 = new Person('B', 13)
    // console.log(p1.name, p1.age)
    // console.log(p2.name, p2.age)
    // p1.sayInfo()
    // p2.sayInfo()
    // console.log(p1, p2)

    // console.log(Person.staticProp)
    // console.log(p1.instanceProp)
    // p1.instanceMethod()
    // p1.instanceMethod2()


    // Student.prototype = new Person()  将父类型的实例指定为子类型的原型对象

    class Student extends Person {
      constructor (name, age, price) {
        super(name, age)
        this.price = price
      }

      // 重写(重新实现)从父类型继承的方法
      sayInfo () {
        console.log(`我叫${this.name}, 今年${this.age}, 月入${this.price}`)
      }
    }

  const s = new Student('Tom', 18, 16000)
  console.log(s)
  s.sayInfo()


  </script>
</body>
</html>